🔥Final Project Day 4 - Grid Line 에 이름 붙이기

/* Line 별로 이름 붙이기 */
.grid {
  display: grid;
  gap: 10px;

  grid-template-columns: [first-line] 100px [second-line] 100px [third-line] 100px [fourth-line] 100px [fifth-line];

  grid-template-rows: repeat(4, 100px [sexy-line]);
}

.header {
  background: #2ecc71;

  grid-column: span 4;
}
.content {
  background: #3498db;

  /* grid-column: 1 / -2; 를 아래로 대체*/
  grid-column: first-line / fourth-line;

  /* grid-row: span 2; 를 아래로 대체 */
  grid-row: sexy-line 1 / sexy-line 3;
}
.nav {
  background: #8e44ad;

  grid-row: span 2;
}
.footer {
  background: #f39c12;

  grid-column: span 4;
}